<template>
    <div class="pageIndex">
        <div class="header">
            <div class="toolbar">
                <div class="collapse"><i class="fa fa-server"></i></div>
            </div>
        </div>
        <div class="sidebars">
            <div class="logo">
                <img :src="logoImg" alt="">
            </div>
            <div class="menupan">

                <el-menu
                    color="#fafafa"
                    active-text-color="#fff"
                    background-color="#204d97"

                    :default-active="menuIndex"
                    :router="1>0"
                    class="el-menu-vertical-demo"  
                >

                    <template v-for = "(menuitem,menuind) in menus" :key="menuind">                    
                        <el-sub-menu :index="menuitem.code" v-if="menuitem.children.length>0">
                            <template #title> 
                                <el-icon><i :class="menuitem.icon"></i></el-icon>
                                <span>{{menuitem.lab}}</span>
                            </template>       
                            <el-menu-item 
                                v-for="(sub,subInd) in menuitem.children" :key="sub.code"
                                :index="sub.code">
                                {{sub.lab}}    
                            </el-menu-item>                 
                        </el-sub-menu> 

                        
                        <el-menu-item :index="menuitem.code" v-if="menuitem.children.length==0">
                            <el-icon><i :class="menuitem.icon"></i></el-icon>
                            <span>{{menuitem.lab}}</span>
                        </el-menu-item>

                    </template> 
                </el-menu> 
            </div>
        </div>
        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        mounted(){
            var me = this;
            try {
                console.log( me.$route , new Date());
                me.setMenuIndex();
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{
                logoImg : require("../res/imgs/znlogo-1.png") ,
                menus :[
                    { code:"home" , lab:"系统总览" , icon:"fa fa-dashboard" , children :[] } ,
                    { code:"basedata" , lab:"基础数据" , icon:"fa fa-server" , children :[
                        { code :"basedata_dict" , lab:"数据字典" } ,
                        { code :"basedata_org" , lab:"管理机构" } ,
                        { code :"basedata_user" , lab:"系统用户" } ,
                        { code :"basedata_sys" , lab:"业务系统" } ,
                        { code :"basedata_powerunit" , lab:"计量单元" } ,
                        { code :"basedata_variant" , lab:"设备参数" } 
                    ] } ,
                    { code:"collecting" , lab:"数据采集" , icon:"fa fa-cogs" , children :[
                        { code :"collecting_datasvr" , lab:"数据服务器" } ,
                        { code :"collecting_mqsvr" , lab:"通信服务器" } ,
                        { code :"collecting_terminal" , lab:"采集终端" } ,
                        { code :"collecting_channel" , lab:"采集通道" } ,
                        { code :"collecting_device" , lab:"设备列表" } ,
                        { code :"collecting_variant" , lab:"变量参数" }  
                    ] } ,
                    { code:"monitor" , lab:"运行监控" , icon:"fa fa-gears" , children :[] } ,
                    { code:"query" , lab:"查询统计" , icon:"fa fa-bar-chart-o" , children :[] } ,
                ],
                menuIndex:""
            }
        },
        methods:{
            setMenuIndex(){
                var me = this;
                try {
                    var routePath = me.$route.path;
                    me.menus.forEach( menu=>{  
                        if( menu.children.length>0 ){                            
                            menu.children.forEach( sub=>{
                                if( routePath.indexOf(sub.code)>0){
                                    me.menuIndex = sub.code;
                                    return;
                                }
                            })
                        }
                        else{
                            if( routePath.indexOf(menu.code)>0){
                                me.menuIndex = menu.code;
                                return;
                            }
                        }
                    })
                } catch (error) {
                    console.log(error)
                }
            }
        }
        
    }
</script>

<style lang="less" scoped>

    .pageIndex{
        width: 100%;
        .header{
            position: fixed;
            width: 100%;
            z-index: 998;
            padding: 10x;
            padding-left: 200px;
            background-color: #fff;;
            .toolbar{
                display: flex;
                justify-content: space-between;
                .collapse{
                    height: 40px;
                    line-height: 40px;
                    width: 40px;
                    text-align: center; 
                    font-size: 1.2em;
                    font-weight: bold;
                }
                .collapse:hover{
                    cursor: pointer;
                    color: #0077fe;
                }
            }
        }
        .sidebars{
            position: fixed;
            width: 200px;
            z-index: 999;
            height: 100%; 
            background-color: #204d97;
            color:#fff;
            display: flex;
            flex-direction: column;

            .logo{
                padding: 15px;
                img{
                    width:100%;
                }
            }
            .menupan{
                flex: 1;
                overflow: hidden;
                overflow-y: auto;

            }
        }
        .container{
            padding: 15px;
            padding-top: 55px;
            padding-left: 215px;
            box-sizing: border-box;
        }
    }


    ::v-deep .el-menu {
        background-color: var(--el-menu-bg-color);
        border-right: 0px solid var(--el-menu-border-color);
        box-sizing: border-box;
        list-style: none;
        margin:0;
        padding-left: 0;
        position: relative;
        .el-menu-item{
            color: #fafafa;
        }
        .el-sub-menu__title{
            color: #fafafa;
        }
    }

    ::v-deep .el-menu-item.is-active{
        background-color: #0b254e;
    }


</style>